<!DOCTYPE html>
<html lang="en">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  

</head>

<body>
  <button onclick="alert(11111)">使用属性绑定事件</button>
  <button id="btn1">使用js属性绑定事件</button>
  <button id="btn2">addEventListener</button>


  <script>
    let btn1 = document.querySelector("#btn1")

    btn1.onclick = function () {
      alert('使用js1 绑定的事件')
    }

    //会覆盖上一次 onclick
    btn1.onclick = function () {
      alert('使用js2 绑定的事件')
    }


    let btn2 = document.querySelector("#btn2")
    btn2.addEventListener('click', function () {
      alert('1使用addEventListener 绑定的事件')
    })
    btn2.addEventListener('click', function () {
      alert('2使用addEventListener 绑定的事件')
    })

  </script>


</body>

</html>